{% stylesheet %}
	@media screen and (max-width: 767px) {
  .block_faq {
    background-color: var(--bg);
  }
}
.block_faq .content {
  background-color: var(--bg);
  color: var(--text-color);
  z-index: 10;
  position: relative;
}
@media screen and (min-width: 768px) {
  .block_faq .content {
    box-shadow: 0px 18px 50px rgba(26, 26, 26, 0.1);
  }
}
.block_faq .content .aq {
  color: var(--faq-color);
}
.block_faq .content .aq .aq_wrapper {
  background-color: var(--faq-bg);
}
.block_faq .content .aq .aq_wrapper .list .list_item:nth-last-child(1) {
  border-bottom: 0 !important;
}
.block_faq .content .aq .aq_wrapper .list .list_item.open .question .icon_span {
  background-color: rgb(26, 26, 26);
  color: #fff;
}
.block_faq .content .aq .aq_wrapper .list .list_item.open .question .icon_span svg {
  transform: rotate(-90deg);
}
.block_faq .content .aq .aq_wrapper .list .list_item .question {
  cursor: pointer;
}
.block_faq .content .aq .aq_wrapper .list .list_item .question:hover .icon_span {
  background-color: var(--faq-color);
  color: #fff;
}
.block_faq .content .aq .aq_wrapper .list .list_item .question .icon_span {
  display: inline-flex;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  background-color: rgba(26, 26, 26, 0.12);
  color: var(--faq-color);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.block_faq .content .aq .aq_wrapper .list .list_item .question .icon_span svg {
  transform: rotate(90deg);
  transition: transform 0.2s ease-in-out;
}
.block_faq .content .aq .aq_wrapper .list .list_item .answer {
  display: none;
}
{% endstylesheet %}

{% assign data = section.settings %}

<div class="block_faq md:py-0 py-[48px]" style="--bg: {{data.bg_color}};--text-color: {{data.text_color}};">
  <div class="container_wrapper">
    <div class="content md:rounded-3xl grid md:grid-cols-2 md:gap-[56px] md:p-[56px]">
      <div class="main_detail">
        {% if data.title != '' %}
          <div class="text_title public_title">{{ data.title }}</div>
        {% endif %}
        {% if data.detail != '' %}
          <div class="text_detail mt-6">{{ data.detail }}</div>
        {% endif %}

        <div class="md:block hidden">
			{% if data.image.src != '' %}
				<div class="img_box mt-6">
				  {% include 'lazy_img', src: data.image.src, alt: data.image.alt, class: 'max-w-[160px] object-cover' %}
				</div>
			  {% endif %}
	  
			  {% if data.working_time != '' %}
				<div class="working_time mt-4">{{ data.working_time }}</div>
			  {% endif %}
			  {% if data.answer_time != '' %}
				<div class="answer_time opacity-70 mt-1">{{ data.answer_time }}</div>
			  {% endif %}
		</div>
      </div>
      <div class="aq py-[5px] md:mt-0 mt-8" style="--faq-bg: {{data.faq_bg}};--faq-color: {{data.faq_color}};">
        <div class="aq_wrapper rounded-xl w-full md:px-[30px] px-[20px] box-border">
          <ul class="list">
            {% for block in section.blocks %}
              {% if block.question != '' %}
                <li class="list_item">
                  <div class="question py-5 flex justify-between">
                    <span class="question_title font-bold">{{ block.question }}</span>
                    <span class="icon_span flex-shrink-0">
                      <svg
                        role="presentation"
                        focusable="false"
                        width="5"
                        height="8"
                        class="icon icon-chevron-right-small reverse-icon"
                        viewBox="0 0 5 8"
                      >
                        <path d="m.75 7 3-3-3-3" fill="none" stroke="currentColor" stroke-width="1.5"></path>
                      </svg>
                    </span>
                  </div>
                  <div class="answer pb-5">
                    {{ block.answer }}
                  </div>
                </li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>
      </div>
	  <div class="md:hidden block text-center md:mt-0 mt-8">
		{% if data.image.src != '' %}
			<div class="img_box">
			  {% include 'lazy_img', src: data.image.src, alt: data.image.alt, class: 'max-w-[160px] object-cover' %}
			</div>
		  {% endif %}
  
		  {% if data.working_time != '' %}
			<div class="working_time mt-4">{{ data.working_time }}</div>
		  {% endif %}
		  {% if data.answer_time != '' %}
			<div class="answer_time opacity-70 mt-1">{{ data.answer_time }}</div>
		  {% endif %}
	</div>
    </div>
  </div>
</div>

<script>
$(function() {
	window.switchClass = function switchClass(
		dom,
		name,
		hasFunc,
		notFunc,
		finallyFunc
	  ) {
		if (dom.hasClass(name)) {
		  dom.removeClass(name);
		  if (hasFunc) {
			hasFunc();
		  }
		} else {
		  dom.addClass(name);
		  if (notFunc) {
			notFunc();
		  }
		}
		if (finallyFunc) {
		  finallyFunc();
		}
	};
	window.customTemplateFunc = {
		hexToRgba(hex, alpha) {
		  hex = hex.replace("#", "");
		  const red = parseInt(hex.substring(0, 2), 16);
		  const green = parseInt(hex.substring(2, 4), 16);
		  const blue = parseInt(hex.substring(4, 6), 16);
		  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
		},
	};
  $('.block_faq .list_item').css('border-bottom',`1px solid ${window.customTemplateFunc.hexToRgba('{{data.faq_color}}', 0.12)}`)
  $('.block_faq .question').on('click', function() {
    window.switchClass($(this).parents('.list_item'),'open',() => {
      $(this).parents('.list_item').find('.answer').slideUp(200)
    },() => {
      $(this).parents('.list_item').find('.answer').slideDown(200)
    })
  })
})
</script>

{% schema %}
{
	"class": "block_faq",
	"is_global": false,
	"icon": "icon-wenzipinglun",
	"name": {
		"zh_CN": "常见问题解答",
		"en_US": "Frequently Asked Questions"
	},
	"max_blocks": 20,
	"blocks": [
		{
			"name": {
				"zh_CN": "常见问题解答",
				"en_US": "Frequently Asked Questions"
			},
			"type": "item",
			"settings": [
				{
					"type": "card_input",
					"label": {
						"zh_CN": "问题",
						"en_US": "Problem"
					},
					"id": "question",
					"default": "Do you ship overseas?"
				},
				{
					"type": "card_text_editor",
					"label": {
						"zh_CN": "回答"
					},
					"id": "answer",
					"default": "Yes, we ship all over the world. Shipping costs will apply, and will be added at checkout. We run discounts and promotions all year, so stay tuned for exclusive deals."
				}
			]
		}
	],
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": ""
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "detail",
			"default": "Use this text to share information about your product or shipping policies."
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "图片",
				"en_US": "Image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "建议尺寸：700 x 160px"
			},
			"id": "image"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "工作时间"
			},
			"id": "working_time",
			"default": "Our customer support is available Monday to Friday: 8am-8:30pm."
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "回答时间"
			},
			"id": "answer_time",
			"default": "Average answer time: 24h"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "颜色设置",
				"en_US": "Color Settings"
			}
		},
		{
			"type": "card_color",
			"id": "bg_color",
			"label": {
				"zh_CN": "背景颜色",
				"en_US": "Background color"
			},
			"default": "#f0f0f0"
		},
		{
			"type": "card_color",
			"id": "text_color",
			"label": {
				"zh_CN": "文字颜色",
				"en_US": "Text color"
			},
			"default": "#1A1A1A"
		},
		{
			"type": "card_color",
			"id": "faq_bg",
			"label": {
				"zh_CN": "回答背景颜色"
			},
			"default": "#fff"
		},
		{
			"type": "card_color",
			"id": "faq_color",
			"label": {
				"zh_CN": "回答文字颜色"
			},
			"default": "#1A1A1A"
		}
	],
	"default": {
		"settings": {
			"title": "FAQ",
			"detail": "Use this text to share information about your product or shipping policies.",
			"image": {
				"src": "",
				"alt": ""
			},
			"working_time": "Our customer support is available Monday to Friday: 8am-8:30pm.",
			"answer_time": "Average answer time: 24h",
			"bg_color": "#f0f0f0",
			"text_color": "#1A1A1A",
			"faq_bg": "#fff",
			"faq_color": "#1A1A1A"
		},
		"blocks": [
			{
				"question": "Do you ship overseas?",
				"answer": "Yes, we ship all over the world. Shipping costs will apply, and will be added at checkout. We run discounts and promotions all year, so stay tuned for exclusive deals.",
				"block_type": "item"
			},
			{
				"question": "Do you ship overseas?",
				"answer": "Yes, we ship all over the world. Shipping costs will apply, and will be added at checkout. We run discounts and promotions all year, so stay tuned for exclusive deals.",
				"block_type": "item"
			}
		]
	}
}
{% endschema %}
